<template>
  <uv-popup ref="cityPopup" mode="bottom" :safeAreaInsetTop="true" :safeAreaInsetBottom="false" :closeOnClickOverlay="false">
    <div style="height: 1px;background: #EFEFEF;width:100%"></div>
    <div style="height: calc(100vh - 45px);overflow: hidden;display: flex;justify-content: space-between;flex-direction: column;">
      <div>
        <div class="p1756345111 pl20  pr30 fac jcsb">
          <uv-tabs v-if="list.length" :itemStyle="{fontSize: '32rpx', height: '44px'}" :customStyle="{ fontSize: '32rpx' }" lineColor="#E60012" @click="tabClick" :current="currentIndex" :list="list"></uv-tabs>
          <uv-icon @click="closeFun" color="rgb(201, 202, 202)" name="close"></uv-icon>
        </div>
        <div style="height: 1px;background: #EFEFEF;width:100%"></div>
      </div>
      <div class="oy h100">
        <uv-cell-group :border="false">
          <uv-cell v-if="currentIndex == 0" @click="provinceClick(provinceItem, provinceItemIndex)" v-for="(provinceItem, provinceItemIndex) in provinceList" :key="'provinceList-' + provinceIndex + '-' + provinceItemIndex" :cellStyle="{padding: '25rpx 30rpx'}" :titleStyle="{fontSize: '30rpx', color: provinceItemIndex == provinceIndex ? '#e60012' : '#333' }" :title="provinceItem.title" :stop="false"></uv-cell>
          <uv-cell v-if="currentIndex == 1" @click="cityClick(cityItem, cityItemIndex)" v-for="(cityItem, cityItemIndex) in cityList" :key="'cityList-' + cityIndex + '-' + cityItemIndex" :cellStyle="{padding: '25rpx 30rpx'}" :titleStyle="{fontSize: '30rpx', color: cityIndex == cityItemIndex ? '#e60012' : '#333'}" :title="cityItem.title" :stop="false"></uv-cell>
          <uv-cell v-if="currentIndex == 2" @click="areaClick(areaItem, areaItemIndex)" v-for="(areaItem, areaItemIndex) in areaList" :key="'areaList-' + areaIndex + '-' + areaItemIndex" :cellStyle="{padding: '25rpx 30rpx'}" :titleStyle="{fontSize: '30rpx', color: areaIndex == areaItemIndex ? '#e60012' : '#333'}" :title="areaItem.title" :stop="false"></uv-cell>
          <uv-cell v-if="currentIndex == 3 && leval == 4" @click="districtClick(item, index)" v-for="(item, index) in districtList" :key="'districtList-' + districtIndex + '-' + index" :cellStyle="{padding: '25rpx 30rpx'}" :titleStyle="{fontSize: '30rpx', color: index == districtIndex ? '#e60012' : '#333'}" :title="item.title" :stop="false"></uv-cell>
        </uv-cell-group>
      </div>
      <div class=" bf7f8f8">
        <div class="pb30 common-footer bf7f8f8  pl30 pr30 pt30" style="height: 142rpx;overflow: hidden; box-sizing: border-box;">
          <button @click="submitTap" class="common-button fz30 w100 bD60012 " style="height: 90rpx;color: #fff; border: 1rpx solid #D60012!important; ">确认</button>
        </div>
        <uv-safe-bottom />
      </div>
    </div>
  </uv-popup>
</template>
<script>
import { addressGetRegionsList } from '@/api'
import myLayOutVue from "../components/layOut.vue";
export default {
  props: {
    form: {
      type: Object,
      default: () => { }
    },
    leval: {
      type: Number,
      default: 4
    },

  },
  components: {
    "u-my-layOut": myLayOutVue,
  },
  data() {
    return {
      loading: false,
      currentIndex: 0,
      provinceList: [],
      provinceForm: {},
      provinceIndex: null,
      cityList: [],
      cityForm: {},
      cityIndex: null,
      areaList: [],
      areaForm: {},
      areaIndex: null,
      districtList: [],
      districtForm: {},
      districtIndex: null,
      list: [],

    }
  },
  mounted() {
    addressGetRegionsList().then(res => {
      let data = res.result
      this.provinceList = data
    })
  },
  methods: {
    tabClick(value) {
      let currentIndex = value.index
      if (value.index == 1 && this.provinceIndex == null) {
        this.cityList = []
        uni.$uv.toast('请先选择省')
      } else if (value.index == 2 && this.cityIndex == null) {
        this.areaList = []
        uni.$uv.toast('请先选择市')
      } else if (value.index == 3 && this.areaIndex == null) {
        this.districtList = []
        uni.$uv.toast('请先选择区')
      }
      if (this.list[currentIndex].disableds) {
      } else {
        this.currentIndex = currentIndex
      }
    },
    provinceClick(item, index) {

      if (this.provinceIndex !== index) {
        this.cityList = []
        this.areaList = []
        this.districtList = []
        this.cityIndex = null
        this.areaIndex - null
        this.districtIndex = null
        this.cityForm = {}
        this.areaForm = {}
        this.districtForm = {}
        this.cityList = item.child
        this.provinceForm = item
        this.provinceIndex = index
        this.list = [{ id: 0, name: item.title }, { id: 1, name: '请选择' }]
        this.currentIndex = 1
      }
    },
    cityClick(item, index) {
      if (this.cityIndex !== index) {
        this.areaList = []
        this.districtList = []
        this.areaIndex = null
        this.districtIndex = null
        this.areaForm = {}
        this.districtForm = {}
        this.areaList = item.child
        this.cityForm = item
        this.cityIndex = index
        this.list = [{ id: 0, name: this.provinceForm.title }, { id: 1, name: item.title }, { id: 2, name: '请选择' }]
        this.currentIndex = 2
      }
    },
    areaClick(item, index) {
      if (this.areaIndex !== index) {
        this.districtList = item.child || []
        this.districtIndex = null
        this.districtForm = {}
        this.areaForm = item
        this.areaIndex = index

        if (item.child && item.child.length) {
          if (this.leval == 4) {
            this.list = [{ id: 0, name: this.provinceForm.title }, { id: 1, name: this.cityForm.title }, { id: 2, name: item.title }, { id: 3, name: '请选择' }]
            this.currentIndex = 3
          } else {
            this.list = [{ id: 0, name: this.provinceForm.title }, { id: 1, name: this.cityForm.title }, { id: 2, name: item.title }]

          }
        } else {
          this.list = [{ id: 0, name: this.provinceForm.title }, { id: 1, name: this.cityForm.title }, { id: 2, name: item.title }]
        }
      }
    },

    districtClick(item, index) {
      this.districtForm = item
      this.districtIndex = index
      this.currentIndex = 2
      this.$set(this.list[3], 'name', item.title)
      this.$nextTick(() => {
        this.currentIndex = 3
      })
    },
    submitTap() {
      let flag = true
      if (this.provinceIndex == null) return uni.$uv.toast('请选择省')
      if (this.cityIndex == null) return uni.$uv.toast('请选择市')
      if (this.areaIndex == null) return uni.$uv.toast('请选择区')
      if (this.areaForm?.child?.length && this.districtIndex == null && this.leval == 4) return uni.$uv.toast('请选择乡镇/街道')
      this.$emit('chooseChange', {
        province: this.provinceForm,
        city: this.cityForm,
        area: this.areaForm,
        district: this.districtForm
      })
      this.$refs.cityPopup.close()
    },
    closeTap() {
      this.$refs.cityPopup.close()

    },
    openFun() {
      this.loading = true
      let currentIndex = 0
      let provinceIndex = null
      let areaIndex = null
      let cityIndex = null
      let districtIndex = null
      let cityList = []
      let areaList = []
      let districtList = []
      let provinceForm = {}
      let cityForm = {}
      let areaForm = {}
      let districtForm = {}
      let data = JSON.parse(JSON.stringify(this.provinceList)).find((i, iI) => {
        if (this.form.province && this.form.province == i.title) {
          provinceIndex = iI
          provinceForm = i
          currentIndex = 0
          return i
        }
      })
      if (provinceForm.child && provinceForm.child.length) cityList = provinceForm.child
      if (cityList && cityList.length) {
        JSON.parse(JSON.stringify(cityList)).find((i, iI) => {
          if (this.form.city && this.form.city == i.title) {
            cityIndex = iI
            cityForm = i
            currentIndex = 1
            return i
          }
        })
      }
      if (cityForm.child && cityForm.child.length) areaList = cityForm.child
      if (areaList && areaList.length) {
        JSON.parse(JSON.stringify(areaList)).find((i, iI) => {
          if (this.form.area && this.form.area == i.title) {
            areaIndex = iI
            areaForm = i
            currentIndex = 2
            return i
          }
        })
      }
      if (areaForm.child && areaForm.child.length) districtList = areaForm.child
      if (districtList && districtList.length) {
        JSON.parse(JSON.stringify(districtList)).find((i, iI) => {
          if (this.form.district && this.form.district == i.title) {
            districtIndex = iI
            districtForm = i
            currentIndex = 3
            return i
          }
        })
      }
      let list = []
      if (provinceForm.title) {
        list.push({ name: provinceForm.title, id: 0 })
        currentIndex = 0
        if (cityForm.title) {
          list.push({ name: cityForm.title, id: 1 })
          currentIndex = 1
          if (areaForm.title) {
            list.push({ name: areaForm.title, id: 2 })
            currentIndex = 2
            if (this.leval == 4) {
              if (districtForm.title) {
                list.push({ name: districtForm.title, id: 3 })
                currentIndex = 3
              } else {
                list.push({ name: '请选择', id: 3, })
                currentIndex = 3
              }
            }

          } else {
            list.push({ name: '请选择', id: 2, })
            currentIndex = 2
          }
        } else {
          list.push({ name: '请选择', id: 1, })
          currentIndex = 1
        }
      } else {
        list.push({ name: '请选择', id: 0, })
        currentIndex = 0
      }


      this.list = list
      // if (this.list && this.list.length == 3) {
      //   if (areaForm.child?.length) {
      //     this.list.push({ name: districtForm.title || '请选择', id: 3 })
      //     currentIndex = 3
      //   }
      // }
      this.provinceForm = provinceForm
      this.cityForm = cityForm
      this.areaForm = areaForm
      this.districtForm = districtForm
      this.provinceIndex = provinceIndex
      this.cityIndex = cityIndex
      this.areaIndex = areaIndex
      this.districtIndex = districtIndex
      this.cityList = cityList
      this.areaList = areaList
      this.districtList = districtList
      this.currentIndex = currentIndex


      this.$refs.cityPopup.open()
    },
    closeFun() {
      this.$refs.cityPopup.close()
      this.list = []
      this.currentIndex = 0
      this.provinceForm = {}
      this.cityForm = {}
      this.areaForm = {}
      this.districtForm = {}
      this.provinceIndex = null
      this.cityIndex = null
      this.areaIndex = null
      this.districtIndex = null
      this.cityList = []
      this.areaList = []
      this.districtList = []
    }
  },

}
</script>
<style lang="scss" scoped>
@import "../common.scss";
.p1756364238 {
  width: 90vw;
}

.p1756345111 {
  height: 90rpx;
  padding-right: 25rpx 30rpx;
  padding-left: 20rpx;
}
.p1756193077 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 90rpx !important;
  background: #de0012 !important;
  font-weight: 600 !important;
  font-size: 36rpx !important;
  color: #ffffff !important;
  border-radius: 50rpx !important;
  box-sizing: border-box !important;
  margin-left: 25rpx 30rpx !important;
  margin-right: 25rpx 30rpx !important;
}
  
</style>